<!--购买会员-->
<template>
  <div :class="['bg', isShow ? 'bg-color' : '']" @click="hideClick">
    <div class="all"></div>

    <div class="content bg2" v-if="isShow"  @click="click">
      
      <!--标题-->
      <div class="title">
        <text class="font28 text1">{{isVip ? T('续费会员') : T('购买会员')}}</text>

        <div class="all"></div>
        <text v-if="noBuy" class="font28 warning-t1">{{T('VTN余额不足')}}</text>
        <!-- <div class="row" v-if="noBuy">
          <text class="font22 warning-t1">{{T('VTN余额不足')}}</text>
          <text class="font22 main-t1" @click="buyVtnClick">{{'  ' + T('去充值')}}</text>
        </div> -->
      </div>

      <div class="cell bg1" :class="[select==index ? 'cell-sele' : '']"  
        v-for="(item, index) in datas" :key="index"
        @click="cellClick(item, index)">
        <text class="font28 text1">{{T(item.month+T('个月'))}}</text>
        <div class="all"></div>
        <template v-if="Number(item.originalPrice) != Number(item.currentPrice)">
          <text class="font24 text2" style="text-decoration:line-through">{{item.originalPrice+'VTN'}}</text>
          <div class="width10"></div>
        </template>
        <text class="font28 text1">{{item.currentPrice+'VTN'}}</text>
      </div>


      <div v-if="noBuy" class="but main-bt1" @click="buyVtnClick">
        <text class="font30 text1">{{T('去充值')}}</text>
      </div>
      <template v-else>
        <div :class="['but', noBuy ? 'no1' : 'main-bt1']" v-if="isVip" @click="renewClick">
          <text class="font30 text1">{{T('立即续费')}}</text>
        </div>
        <div :class="['but', noBuy ? 'no1' : 'main-bt1']" v-else @click="bugClick">
          <text class="font30 text1">{{T('立即购买')}}</text>
        </div>
      </template>
    </div>
  </div>
</template>

<script>

//功能
import modal from "@/_js/modal";
import math from "@/_js/math";
import Config from "@/_js/config";
import navigator from "@/_js/navigator";
import broadcast from "@/_js/broadcast";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  data() {
    return {
      T:T,
      math:math,
      Config:Config,
      isShow:false, 
      
      isVip:false, //false购买 true续费
      datas: [],
      vtnAmount: undefined, //VTN余额-带提现权益
      select: 0, //选中序号
      vtn: undefined, //应付金额
      noBuy: false, //true买不起
    };
  },

  mounted() {

    this.isVip = navigator.getParam("isVip");
    //延时访问-避免无法弹出加载LOG
    setTimeout(() => {
      this.httpQueryMemberDetail();
    }, 200);
  },

  methods: {

    initData() {
      try {
        var data = this.datas[this.select];
        this.noBuy = math.getNumber(data.currentPrice) > math.getNumber(this.vtnAmount);
      } catch (error) {
      }
    },

    /********************************** HTTP*/
    //获取会员信息
    httpQueryMemberDetail() {
      
      modal.showLoad();
      var param = {};
      weexHttp.post("member/queryMemberDetail", param, true, (data) => {

        modal.hideLoad();
        if (data.status == 200) {
          data = data.data;
          this.vtnAmount = math.getNumber(data.vtnAmount) < math.getNumber(data.vtnEquityAmount) ? data.vtnAmount : data.vtnEquityAmount;
          this.datas = data.memberList;
          this.initData();
          this.isShow = true;
        } else {
          modal.toast(data.msg);
          this.hideClick();
        }
      });
    },

    //购买VIP
    httpBuyVip() {

      var data = this.datas[this.select];
      modal.showLoad();
      var param = {'discountId':data.discountId};
      weexHttp.postX("member/buyMember",param,true,(data) => {

        modal.hideLoad();
        if (data.status == 200) {
            broadcast.send(broadcast.VIP_BUY_OK);
            this.isVip ? modal.toast(T('续费成功')) : modal.toast(T('购买成功'));
            this.hideClick();
        } else {
          modal.toast(data.msg);
        }
      });
    },

    /********************************** 点击*/
    //遮挡隐藏点击
    click() {

    },

    //隐藏
    hideClick() {
      navigator.dismiss();
    },
    
    //去充值
    buyVtnClick() {
      this.hideClick();
      var nav = {'navColor':'#0c0c0c'};
      var param = {'wallet':'consumeWallet'};
      navigator.open("", "wallet/WalletBuy", param, nav);
    }, 

    //购买
    bugClick() {
      
      if (this.noBuy) {
        return;
      }

      var data = this.datas[this.select];
      var parm = {title:T("确认购买"),
                  message:T("确认使用&{1}VTN购买&{2}个月会员").replace("&{1}", data.currentPrice).replace("&{2}",  data.month),
                  okBtn:T("确认"), cancelBtn:T("取消")};
      modal.confirm(parm, (bool)=>{
        if (bool == "true") {
          this.httpBuyVip();
        } else {
        }
      });
    },

    //续费
    renewClick() {
      if (this.noBuy) {
        return;
      }

      var data = this.datas[this.select];
      var parm = {title:T("确认续费"),
                  message:T("确认使用&{1}VTN续费&{2}个月会员").replace("&{1}", data.currentPrice).replace("&{2}", data.month),
                  okBtn:T("确认"), cancelBtn:T("取消")};
      modal.confirm(parm, (bool)=>{
        if (bool == "true") {
          this.httpBuyVip();
        } else {

        }
      });
    },

    //列表点击
    cellClick(item, index) {
      this.select = index;
      this.initData();
    }
  }
}

</script>


<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  align-items: flex-start;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.bg-color {
  background-color:rgba(0, 0, 0, 0.6);
}
.content {
  width: 750px;

  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 60px;

  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.title {
  flex-direction: row;
  align-items: flex-end;
  margin-bottom: 30px;
}

.cell {
  flex-direction: row;
  align-items: center;
  height: 80px;
  border-radius: 40px;
  border: 2px solid;
  margin-bottom: 20px;
  padding: 0 40px;
}
.cell-sele {
  border-width: 2px;
  border-color: #1677fe;
}
.but {
  /* background-image:linear-gradient(to right, #1677fe, #31afff); */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 80px;
  border-radius: 12px;
  margin-top: 30px;
}
</style>